<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page, index) of pages" :key="index">
            <div class="icon" v-for="item of page" :key="item.id">
                <div class="icon-img">
                  <img class="icon-imgcontent" :src="item.imgUrl">
                </div>
                <p class="icon-desc">{{item.desc}}</p>
            </div>
       </swiper-slide>

    </swiper>

  </div>
</template>


<script>
export default {
  name:"HomeIcons",
  props:{
    iconList:Array
  },
  data () {
    return {
     swiperOption:{},
    //  iconList:[
    //    {
    //      id:"001",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t16912/18/2046755333/11079/5d93a046/5ae41d1aN7c1bb190.png",
    //      desc:"景点门票"
    //    },
    //    {
    //      id:"002",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t21658/347/221358098/7461/f86e6f74/5b03b170Nc9e0ec7c.png",
    //      desc:"滑雪季"
    //    },
    //    {
    //      id:"003",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t18865/90/1804471517/14538/72c79ba/5ad87b67N1ebcb69b.png",
    //      desc:"泡温泉"
    //    },
    //    {
    //      id:"004",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t17725/156/1767366877/17404/f45d418b/5ad87bf0N66c5db7c.png",
    //      desc:"动植园"
    //    },
    //    {
    //      id:"005",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t16990/157/2001547525/17770/a7b93378/5ae01befN2494769f.png",
    //      desc:"景点门票"
    //    },
    //    {
    //      id:"006",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t22228/270/207441984/11564/88140ab7/5b03fae3N67f78fe3.png",
    //      desc:"一日游"
    //    },
    //    {
    //      id:"007",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t25090/119/1228452431/14811/1a63820b/5b8f8e72N13faa330.png",
    //      desc:"动植园"
    //    },
    //    {
    //      id:"008",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t16912/18/2046755333/11079/5d93a046/5ae41d1aN7c1bb190.png",
    //      desc:"景点门票"
    //    },
    //    {
    //      id:"009",
    //      imgUrl:"//m.360buyimg.com/mobilecms/jfs/t16912/18/2046755333/11079/5d93a046/5ae41d1aN7c1bb190.png",
    //      desc:"一日游"
    //    }
    //  ]

    }

  },
  // 计算属性做图标项翻页
  computed:{
      pages () {
         const pages = [];
         this.iconList.forEach((item,index) =>{
           const page = Math.floor(index/8);
           if (!pages[page]) {
             pages[page] = []
           }
           pages[page].push(item)
         })
         return pages
      }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl';
  @import '~styles/mixins.styl';

  // 先给最外层的div做一个宽高比
   .icons >>> .swiper-container
      height :0
      padding-bottom :50%
   .icons
      margin-top :.1rem
      .icon
        position: relative
        float:left
        width :25%
        height :0
        padding-bottom :25%

        .icon-img
            position : absolute
            top:0
            left :0
            right:0
            bottom:.44rem
            box-sizing: border-box
            padding:.1rem
            .icon-imgcontent
                display :block
                margin :0 auto
                height :100%
        .icon-desc
            position : absolute
            left :0
            right:0
            bottom:0
            height :.44rem
            line-height :.44rem
            color:$darkTextColor
            text-align :center
            ellipsis()
</style>

